<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.wrap {
				height: 170px;
				width: 490px;
				margin: 60px auto;
				overflow: hidden;
				position: relative;
				margin: 100px auto;
			}

			.wrap ul {
				position: absolute;
			}

			.wrap ul li {
				height: 170px;
			}

			.wrap ol {
				position: absolute;
				right: 5px;
				bottom: 10px;
			}

			.wrap ol li {
				height: 20px;
				width: 20px;
				background: #ccc;
				border: solid 1px #666;
				margin-left: 5px;
				color: #000;
				float: left;
				line-height: center;
				text-align: center;
				cursor: pointer;
			}

			.wrap ol li {
				background: #E97305;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<ul id="pic">
				<li><a href="#"><img src="images/1.jpg"></a></li>
				<li><a href="#"><img src="images/2.jpg"></a></li>
				<li><a href="#"><img src="images/3.jpg"></a></li>
				<li><a href="#"><img src="images/4.jpg"></a></li>
				<li><a href="#"><img src="images/5.jpg"></a></li>
			</ul>
			<ol id="list">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
		</div>
	</body>
	<script src="../jquery-3.2.0.js" type="text/javascript">
	</script>
	<script type="text/javascript">
		$(function() {
			var numImg = $("#pic li").length; //获取图片长度
			var index = 0; //定义初始化个数
			var time = setInterval(function() {
				index++;
				if (index == numImg) {
					index = 0;
				}
				$("#pic li").eq(index).siblings().css("display", "none");
				$("#list li").eq(index).siblings().css("background-color", "white");
				$("#pic li").eq(index).css("display", "block");
				$("#list li").eq(index).css("background-color", "orange");
			}, 1000);
			$("#wrap").mouseover(function() {
				clearInterval(time);
			});
			$("#wrap").mouseout(function() {
				
			});
		});

	
		// $(function(){
		// 	var num=$("#list li").length;
		// 	var index1=0;
		// 	setInterval(function(){
		// 		index1++;
		// 		if(index1==num){
		// 			index1=0;
		// 		}
		// 		$("#list li").eq(index1).siblings().css("display","none");
		// 		$("#list li").eq(index1).css("display","block");
		// 	},1000);
		// });
		//
	</script>
</html>
